// 第一种：函数式组件
/* export default function App() {
  return (
    <div>Hello World!</div>
  )
} */

// 第二种：optionsApi模式
/* import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      age: 24
    }
  },
  render() {
    return (<div>{this.age}</div>)
  }
}) */

// 第三种：setup函数模式
/* 
  v-model v-show 支持
  v-if  不支持 但是可以使用三元表达式进行代替
  v-for 不支持 但是可以使用arr.map进行代替
  v-bind 不支持 但是可以直接复制  使用{}解构进行代替
  ref template模式下自动解包.value
      tsx模式下并不会自动解包 需要手动.value
  props 参数需要在setup中定义
  @click 事件 不支持 但是可以使用onClick进行代替 还需要函数科里化，否则一加载就执行
        所有事件有on开头
        所有事件名称首字母大写
  
  插槽 slot

  (<></>) 每个插槽都需要一个根节点
*/
import { defineComponent, ref } from 'vue'

const A = (_, {slots}) => (<>
  <div>
    {slots.default ? slots.default() : "默认值"}
  </div>
  <div>
    {slots?.foo?.()}
  </div>
</>)

interface Props {
  name?: string
}

export default defineComponent({
  props: {
    name: String
  },
  emits: ['on-click'],
  setup(props: Props, {emit}) {
    /* const age = ref(30)
    return () => {
      return (<div>{age.value}</div>)
    } */

    /* const flag = ref(false)
    return () => (<div>
      { flag.value ? <div>true</div> : <div>false</div> }
    </div>) */

    const arr = ref([
      {
        name: '张三'
      },
      {
        name: '李四'
      },
      {
        name: '王五'
      }
    ])

    const fn = (item) => {
      console.log('click', item)
      emit('on-click', item)
    }

    const slotsA = {
      default: () => <div>插槽内容default</div>,
      foo: () => <div>插槽内容foo</div>
    }

    const val = ref(1)

    return () => (<>
      <input type="text" v-model={val.value}/>
      <div>{val.value}</div>
      <hr/>
      <A v-slots={slotsA}></A>
      <p>props:{props.name}</p>
      <hr/>
      <div>
        { 
          arr.value.map(item => {
            return <div name={item.name} onClick={() => fn(item)}>{item.name}</div>
          })
        }
      </div>
    </>)
  }
})